<template>
  <div>
    <h1>数学计算工具</h1>
    <form @submit.prevent="calculateFactorialAndSum">
      <div>
        <label for="n">请输入n值:</label>
        <input v-model.number="n1" type="number" id="n" required>
      </div>
      <button type="submit">计算n!和∑n</button>
      <p>result: {{ result1 }}</p>
      <p></p>
    </form>
    <p v-if="results">{{ results }}</p>

    <form @submit.prevent="calculateFactorials">
      <div>
        <label for="n">请输入n值:</label>
        <input v-model.number="n2" type="number" id="n" required>
      </div>
      <button type="submit">计算1!到n!</button>
      <p>result: {{ result2 }}</p>
      <p></p>
    </form>
    <ul v-if="factorials">
      <li v-for="(factorial, index) in factorials" :key="index">{{ index }}! = {{ factorial }}</li>
    </ul>

    <form @submit.prevent="calculatePrimes">
      <div>
        <label for="n">请输入n值:</label>
        <input v-model.number="n3" type="number" id="n" required>
      </div>
      <button type="submit">列出n以内的质数</button>
      <p>result: {{ result }}</p>
      <p></p>
    </form>
    <ul v-if="primes">
      <li v-for="prime in primes" :key="prime">{{ prime }}</li>
    </ul>

    <form @submit.prevent="solveQuadraticEquation">
      <div>
        <label for="a">a:</label>
        <input v-model.number="a" type="number" id="a" required>
      </div>
      <div>
        <label for="b">b:</label>
        <input v-model.number="b" type="number" id="b" required>
      </div>
      <div>
        <label for="c">c:</label>
        <input v-model.number="c" type="number" id="c" required>
      </div>
      <button type="submit">求解二次方程</button>
      <p>result: {{ result }}</p>
      <p></p>
    </form>
    <p v-if="roots">{{ roots }}</p>
  </div>
</template>

<script>
import axios from 'axios';

export default {
  name: 'Suanfa',
  data() {
    return {
      n1: 0,
      n2: 0,
      n3: 0,
      results: null,
      factorials: null,
      primes: null,
      a: 0,
      b: 0,
      c: 0,
      roots: null,
      result1: '',
      result2: '',
      result3: '',
      result4: '',
    };
  },
  methods: {
    calculateFactorialAndSum() {
      axios.post('http://localhost:9000/calculate/factorial-and-sum', { n: this.n1 })
          .then(response => {
            this.result1 = response.data;
          })
          .catch(error => {
            console.error(error);
          });
    },
    calculateFactorials() {
      axios.post('http://localhost:9000/calculate/factorials', { n: this.n2 })
          .then(response => {
            this.result2 = response.data;
          })
          .catch(error => {
            console.error(error);
          });
    },
    calculatePrimes() {
      axios.post('http://localhost:9000/calculate/primes', { n: this.n3 })
          .then(response => {
            this.primes = response.data;
          })
          .catch(error => {
            console.error(error);
          });
    },
    solveQuadraticEquation() {
      if (this.a === 0) {
        this.roots = 'a不能为0';
        return;
      }
      // b的平方 - 4ac
      if (this.b ** 2 - 4 * this.a * this.c < 0) {
        this.roots = '无实根';
        return;
      }
      axios.post('http://localhost:9000/calculate/quadratic-equation', {}, { params: { a: this.a, b: this.b, c: this.c } })
          .then(response => {
            this.roots = `x1 = ${response.data[0]}, x2 = ${response.data[1]}`;
          })
          .catch(error => {
            console.error(error);
          });
    },
  },
};
</script>